
import React from 'react'

export default function test1() {
  return (
    <div>test1</div>
  )
}




// import React,{ useState, useEffect, useRef,useCallback } from 'react'
// import {Tag,Input,Button} from 'antd'
// /** 
//  * 1. 使用自定义hook，实现N秒倒计时，初始显示 N (来自props)，
//  * 每秒递减1，到0时停止倒计时，并显示 “活动开始” */ 

//     // TODO: 填写useCountDown
// // function useCountDown(number:number) {
// //     const [count,setCount] = useState(0)
// //     const [flag,setFlag] = useState(false)
// //     var timer:any = useRef(null)
// //     useEffect(()=>{
// //         setCount(number)
// //         setFlag(true)
// //         startTimer()
// //         return ()=> {
// //             clearInterval(timer.current)
// //           }
// //     },[])
// //     useEffect(()=>{
// //         console.log(count,flag,timer)
// //         if(count === 0 && flag === true){
// //             setFlag(false)
// //             clearInterval(timer.current)
// //         }
// //     },[count])
// //     const startTimer = ()=>{
// //         timer.current = setInterval(()=>{
// //             console.log('进这里了',count)
// //             setCount((count)=>{
// //                 console.log('这里',count)
// //                 return count -1
// //             })
// //         },1000)
// //     }
// //     return count
// //   }

// //   function Timer(n:number ) {
// //     const number = 10
// //     const time = useCountDown(number);
    
// //     return <span>{time === 0 ? '活动开始' : `剩余${time}秒`}</span>
// //   }
  
// // export default Timer

// /**2.使用自定义hook，实现以下场景
// 页面初始化挂载时显示文字loading，3秒后 显示 文字loaded+一个按钮，
// 然后在点击按钮，页面显示文字为loading并且按钮立即消失不显示，
// 3秒后按钮再次显示并且页面显示文字loaded */


// // const useLoad = (init:Boolean) => {
// //     const [load,setLoad] = useState(true)
// //     const timer:any = useRef(null)
// //     useEffect(()=>{
// //         if(load == false && timer){
// //             clearTimeout(timer)
// //         } else {
// //             timer.current = setTimeout(()=>{
// //                 setLoad(false)
// //             },3000)
// //         }
// //     },[load])
// //     const setLoading = (type:Boolean)=>{
// //         setLoad(type)
// //         console.log(1,type)
// //     }

// //     return [load,setLoading]
// // }

// // const BtnLoad = () => {
   
// //     const [load,setLoading] = useLoad(true);
// //     return (
// //         <div>
// //             {
// //                 load ? `loading` : <div>loaded <button onClick={()=>{
// //                     setLoading(true)
// //                 }}>操作</button></div>
// //             }
// //         </div>
// //     )
// // }

// // export default BtnLoad

// /**3.输出promise执行顺序 */

// // export default function test() {
// //     Promise.resolve().then(() => {
// //         console.log('ok1')
// //         throw 'throw error1'
// //     }).then(() => {
// //         console.log('ok2')
// //     }, err => {
// //         console.log('err->', err)
// //     }).then(() => {
// //         console.log('ok3')
// //         throw 'throw error3'
// //     }).then(() => {
// //         console.log('ok4')
// //     }).catch(err => {
// //         console.log('err->', err)
// //     })
// //   return (
// //     <div>test</div>
// //   )
// // }

// /**
//  * 
//  * 1、实现一个关键词添加组件，接受参数value和onChange
// input 框里面输入的内容，点击增加按钮会生成Tag标签
// 使用React和Ant Design实现一个关键词添加组件，接受参数 `value` 和 `onChange`

// 总关键字最多500个，可以重复
// 关键字用 Antd 的 Tag 展示

// 关键字可以一次输入多个，多个文本用逗号分割，英文逗号中文逗号都需要支持。Tag 需要支持被单独删除。
// 每次变更时需要调用 onChange
// 可以调包，但尽量使用原生API，兼容性不需要考虑，UI使用Antd。
// 使用 function component + Hooks 实现



//  */
// //  export default function tabs(){



// //     const [data, setData] = useState();
  
// //     const handler = useCallback(() => {
// //       location.href = '.';
// //     }, []);
    
// //     useEffect(() => {
// //         setTimeout(() => setData({
// //                  value: 'good' 
// //             }), 1000); 
// //     }, []);
// //     if (data?.value) {
// //         return <p>{data.value}</p>;
// //     }
// //     return <div onClick={handler}>{!data.value && 'no good'}</div>;
//  //}
// //     const [tagList,setTagList]:Array<any> = useState([]) // 展示的tag数组
// //     const [tagFromValue,setTagFromValue]:any = useState([])
// //     const [inputValue,setInputValue] = useState('')
// //     function changeValue(e:any){
// //         let value = e.target.value
// //         console.log(value)
// //         let rules =value.split(/[,，]/g)
// //         let list = []
// //         for(let i=0;i<rules.length;i++){
//                 // if(rules[i] == ''){ 
//                 //     break 
//                 // } else {
//  //                   let obj = {
//     //                 value:i,
//     //                 label:rules[i]
//     //             }
//     //             list.push(obj)
//   //              }
// //             
// //         }
// //         setTagFromValue(list)
// //     }
// //     function changeInputValue(e:any){
// //         let value = e.target.value
// //         setInputValue(value)
// //     }
// //     function addTag(){
// //         let arr:Array<object>= [...tagFromValue]
// //         setTagList(arr)
// //         setInputValue('')
// //     }
// //     function log(el:any){
// //         let arr = tagList.filter((t:any)=>t.value !== el.value)
// //         setTagList(arr)
// //     }
// //     return(
// //         <div>
// //             <div style={{background:'#ccc',padding:'10px'}}>
// //                 <Input 
// //                     style={{width:'200px'}}
// //                     type="test" 
// //                     onBlur={changeValue} 
// //                     onChange={changeInputValue} 
// //                     value={inputValue}/>
// //                 <Button onClick={addTag}>增加</Button>
// //             </div>
// //             {tagList.map((el:any) =>{
// //                 return ( 
// //                     <Tag key={el.value} closable onClose={()=>log(el)}>
// //                         {el.label}
// //                     </Tag>
// //                 )
// //             })}
            
// //         </div>
// //     )
// // }


// /**
//  * 
// 2、实现一个函数，可以将数组转化为树状数据结构
// const arr = [
//   { id: 1, name: "i1" },
//   { id: 2, name: "i2", parentId: 1 },
//   { id: 4, name: "i4", parentId: 3 },
//   { id: 3, name: "i3", parentId: 2 },
//   { id: 8, name: "i8", parentId: 7 }
// ];
// // 出参格式可自行设计
//  * 
//  * 
//  */
// const arr = [
//     { id: 1, name: "i1" },
//     { id: 2, name: "i2", parentId: 1 },
//     { id: 4, name: "i4", parentId: 3 },
//     { id: 3, name: "i3", parentId: 2 },
//     { id: 8, name: "i8", parentId: 7 }
//   ];
// function buildTree(arr:Array<any>) {
//     /**
//      * 此处写代码逻辑
//      */
//     let treeList:any = []
//     for(let item in arr){
//         if(arr[item].parentId == undefined){
//             let obj = {
//                 ...arr[item],
//                 children:[]
//             }
//             treeList.push(obj)
//         } else {
//             let list = cleanTree(treeList,arr[item].parentId,arr[item])
//             console.log(list)
//             if(list == undefined){
//                 treeList.push(arr[item])
//             }
//         }
//     }
//     function cleanTree(arr:any,parentId:number,item:object){
//         console.log(arr,item)
//         for(let value in arr){
//             if(arr[value].id == parentId){
//                 let obj = {
//                     ...item,
//                     children:[]
//                 }
//                 return arr[value].children.push(obj)
//             } else {
//                 cleanTree(arr[value].children,parentId,item)
//             }
//         }
//     }
//     return treeList
// }
// console.log(buildTree(arr))

// // function FooComp() {
// //     const [data, setData] = useState();
  
// //     const handler = useCallback(() => {
// //       location.href = '.';
// //     }, []);
// //   /** 
// //    * 
// //    * 认为这里错误  这里应该放的是赋值的方法。不能直接放if 
// //      if (data?.value) {
// //       return <p>{data.value}</p>;
// //     }
// //     */
// //     useEffect(() => {
// //         /**
// //          *  
// //          *  setTimeout(() => setData({
// //                  value: 'good' 
// //             }), 1000);  这里这么使用setData会改变data的key
// //          */
     
// //     }, []);
  
// //     return <div onClick={handler}>{!data.value && 'no good'}</div>;
// //   }

 

